<template>
  <div class="advert">
    <div class="advert-body">
      <div v-for="(item, index) in datas.form.source_list" :key="index" class="item">
        <el-image :src="item.url" class="image">
          <div slot="error" class="image-error">
            <img
              class="image-error__icon"
              src="@/assets/images/template/h5/placeholder_medium.png"
            />
          </div>
        </el-image>
      </div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'Advert',
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style scoped lang="scss">
.advert {
  padding: 14px 10px 1px;
  background-color: #ffffff;
  position: relative;
  &-body {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 166px;
      height: 62px;
      padding: 5px;
      .image {
        width: 100%;
        height: 100%;
        display: block;
      }
      ::v-deep.image-error {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #f1f1f1;
        border-radius: 12px;
        .image-error__icon {
          width: 40px;
          height: 28px;
        }
      }
    }
  }
}
</style>
